<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>应急救援资源调度平台</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"></script>
    <link href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" rel="stylesheet">
    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        emergency: '#F53F3F',
                        warning: '#FF7D00',
                        success: '#00B42A',
                        neutral: {
                            100: '#F2F3F5',
                            200: '#E5E6EB',
                            300: '#C9CDD4',
                            400: '#86909C',
                            500: '#4E5969',
                            600: '#1D2129'
                        }
                    },
                    fontFamily: {
                        inter: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        .content-auto {
            content-visibility: auto;
        }
        .card-shadow {
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
        }
        .blink {
            animation: blink 1.5s infinite;
        }
        @keyframes blink {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.5; }
        }
        .map-container {
            height: 400px;
        }
        /* 弹窗样式 */
        .modal {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 1000;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.3s, visibility 0.3s;
        }
        .modal.show {
            opacity: 1;
            visibility: visible;
        }
        .modal-content {
            background-color: white;
            padding: 2rem;
            border-radius: 8px;
            text-align: center;
            width: 90%;
            max-width: 400px;
            transform: translateY(-20px);
            transition: transform 0.3s;
        }
        .modal.show .modal-content {
            transform: translateY(0);
        }
        .modal-icon {
            font-size: 3rem;
            color: #00B42A;
            margin-bottom: 1rem;
        }
        .modal-title {
            font-size: 1.5rem;
            font-weight: 600;
            margin-bottom: 0.5rem;
        }
        .modal-desc {
            color: #6B7280;
            margin-bottom: 1.5rem;
        }
        .modal-btn {
            padding: 0.75rem 2rem;
            background-color: #165DFF;
            color: white;
            border: none;
            border-radius: 4px;
            font-weight: 500;
            cursor: pointer;
            transition: background-color 0.2s;
        }
        .modal-btn:hover {
            background-color: #0F46D0;
        }
    </style>
</head>
<body class="font-inter bg-neutral-100 text-neutral-600 min-h-screen flex flex-col">
<!-- 顶部导航 -->
<header class="bg-white shadow-md z-10">
    <div class="container mx-auto px-4 py-3 flex items-center justify-between">
        <div class="flex items-center space-x-4">
            <h1 class="text-xl font-bold text-primary">
                <i class="fa fa-ambulance mr-2"></i>应急救援调度系统
            </h1>
            <span class="bg-warning text-white px-3 py-1 rounded-full text-sm font-medium flex items-center">
                    <i class="fa fa-exclamation-circle mr-1"></i>
                    <span>[紧急]XX区域救援行动</span>
                </span>
        </div>
        <div class="flex items-center space-x-6">
            <span class="text-sm text-neutral-500" id="current-time">2025-07-18 15:30:22</span>
            <div class="flex items-center space-x-2">
                <img src="https://picsum.photos/id/1005/40/40" alt="用户头像" class="h-8 w-8 rounded-full object-cover">
                <span class="text-sm font-medium">调度员-张三</span>
            </div>
        </div>
    </div>
</header>

<!-- 主内容区 -->
<main class="flex-1 container mx-auto px-4 py-6">
    <!-- 地图监控模块 -->
    <div class="bg-white rounded-lg shadow-md mb-6">
        <div class="p-4 border-b border-neutral-200 flex justify-between items-center">
            <h2 class="text-lg font-semibold flex items-center">
                <i class="fa fa-map-marker text-primary mr-2"></i>救援地图
            </h2>
            <div class="flex space-x-2">
                <button class="px-3 py-1 text-sm bg-primary text-white rounded hover:bg-primary/90 transition-colors flex items-center">
                    <i class="fa fa-refresh mr-1"></i>刷新
                </button>
            </div>
        </div>
        <div class="p-4">
            <div id="map" class="map-container rounded-lg border border-neutral-200"></div>
        </div>
    </div>

    <!-- 资源状态和任务列表 -->
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <!-- 资源状态模块 -->
        <div class="lg:col-span-1 space-y-4">
            <div class="bg-white rounded-lg shadow-md p-4">
                <h2 class="text-lg font-semibold mb-4 flex items-center">
                    <i class="fa fa-tasks text-primary mr-2"></i>资源状态
                </h2>
                <div class="space-y-3">
                    <div class="p-3 bg-white rounded-lg border border-neutral-200">
                        <div class="flex justify-between items-center mb-2">
                            <h3 class="font-medium">救援人员</h3>
                            <span class="text-success text-sm">充足</span>
                        </div>
                        <div class="grid grid-cols-3 gap-2 text-center">
                            <div class="bg-success/10 rounded p-2">
                                <p class="text-xs text-neutral-500">可用</p>
                                <p class="text-lg font-semibold text-success">28人</p>
                            </div>
                            <div class="bg-warning/10 rounded p-2">
                                <p class="text-xs text-neutral-500">已调度</p>
                                <p class="text-lg font-semibold text-warning">12人</p>
                            </div>
                            <div class="bg-neutral-100 rounded p-2">
                                <p class="text-xs text-neutral-500">总数</p>
                                <p class="text-lg font-semibold text-neutral-600">40人</p>
                            </div>
                        </div>
                    </div>

                    <div class="p-3 bg-white rounded-lg border border-emergency/50 blink">
                        <div class="flex justify-between items-center mb-2">
                            <h3 class="font-medium">抽水机</h3>
                            <span class="text-emergency text-sm">短缺</span>
                        </div>
                        <div class="grid grid-cols-3 gap-2 text-center">
                            <div class="bg-emergency/10 rounded p-2">
                                <p class="text-xs text-neutral-500">可用</p>
                                <p class="text-lg font-semibold text-emergency">0台</p>
                            </div>
                            <div class="bg-warning/10 rounded p-2">
                                <p class="text-xs text-neutral-500">已调度</p>
                                <p class="text-lg font-semibold text-warning">5台</p>
                            </div>
                            <div class="bg-neutral-100 rounded p-2">
                                <p class="text-xs text-neutral-500">总数</p>
                                <p class="text-lg font-semibold text-neutral-600">5台</p>
                            </div>
                        </div>
                    </div>

                    <div class="p-3 bg-white rounded-lg border border-neutral-200">
                        <div class="flex justify-between items-center mb-2">
                            <h3 class="font-medium">救护车</h3>
                            <span class="text-warning text-sm">紧张</span>
                        </div>
                        <div class="grid grid-cols-3 gap-2 text-center">
                            <div class="bg-success/10 rounded p-2">
                                <p class="text-xs text-neutral-500">可用</p>
                                <p class="text-lg font-semibold text-success">3辆</p>
                            </div>
                            <div class="bg-warning/10 rounded p-2">
                                <p class="text-xs text-neutral-500">已调度</p>
                                <p class="text-lg font-semibold text-warning">2辆</p>
                            </div>
                            <div class="bg-neutral-100 rounded p-2">
                                <p class="text-xs text-neutral-500">总数</p>
                                <p class="text-lg font-semibold text-neutral-600">5辆</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 任务列表模块 -->
        <div class="lg:col-span-2 bg-white rounded-lg shadow-md p-4">
            <div class="flex justify-between items-center mb-4">
                <h2 class="text-lg font-semibold flex items-center">
                    <i class="fa fa-list-alt text-primary mr-2"></i>救援任务列表
                </h2>
            </div>

            <div class="overflow-x-auto">
                <table class="min-w-full divide-y divide-neutral-200">
                    <thead>
                    <tr>
                        <th class="px-3 py-2 bg-neutral-100 text-left text-xs font-medium text-neutral-500 uppercase tracking-wider">任务ID</th>
                        <th class="px-3 py-2 bg-neutral-100 text-left text-xs font-medium text-neutral-500 uppercase tracking-wider">救援地点</th>
                        <th class="px-3 py-2 bg-neutral-100 text-left text-xs font-medium text-neutral-500 uppercase tracking-wider">需求资源</th>
                        <th class="px-3 py-2 bg-neutral-100 text-left text-xs font-medium text-neutral-500 uppercase tracking-wider">状态</th>
                        <th class="px-3 py-2 bg-neutral-100 text-left text-xs font-medium text-neutral-500 uppercase tracking-wider">操作</th>
                    </tr>
                    </thead>
                    <tbody class="bg-white divide-y divide-neutral-200">
                    <tr class="hover:bg-neutral-50 transition-colors">
                        <td class="px-3 py-3 whitespace-nowrap text-sm font-medium text-neutral-600">R-202507</td>
                        <td class="px-3 py-3 whitespace-nowrap text-sm text-neutral-600">XX村小学</td>
                        <td class="px-3 py-3 whitespace-nowrap text-sm text-neutral-600">10名抢险人员、2台抽水机</td>
                        <td class="px-3 py-3 whitespace-nowrap">
                            <span class="px-2 py-1 text-xs font-medium bg-emergency/10 text-emergency rounded-full">待分配</span>
                        </td>
                        <td class="px-3 py-3 whitespace-nowrap text-sm text-primary">
                            <button class="font-medium hover:text-primary/80 transition-colors">调度</button>
                        </td>
                    </tr>
                    <tr class="hover:bg-neutral-50 transition-colors">
                        <td class="px-3 py-3 whitespace-nowrap text-sm font-medium text-neutral-600">R-202506</td>
                        <td class="px-3 py-3 whitespace-nowrap text-sm text-neutral-600">XX街道积水点</td>
                        <td class="px-3 py-3 whitespace-nowrap text-sm text-neutral-600">5名人员、1台抽水机</td>
                        <td class="px-3 py-3 whitespace-nowrap">
                            <span class="px-2 py-1 text-xs font-medium bg-warning/10 text-warning rounded-full">调度中</span>
                        </td>
                        <td class="px-3 py-3 whitespace-nowrap text-sm text-primary">
                            <button class="font-medium hover:text-primary/80 transition-colors">查看</button>
                        </td>
                    </tr>
                    <tr class="hover:bg-neutral-50 transition-colors">
                        <td class="px-3 py-3 whitespace-nowrap text-sm font-medium text-neutral-600">R-202505</td>
                        <td class="px-3 py-3 whitespace-nowrap text-sm text-neutral-600">XX医院</td>
                        <td class="px-3 py-3 whitespace-nowrap text-sm text-neutral-600">3名医护人员、1辆救护车</td>
                        <td class="px-3 py-3 whitespace-nowrap">
                            <span class="px-2 py-1 text-xs font-medium bg-success/10 text-success rounded-full">已完成</span>
                        </td>
                        <td class="px-3 py-3 whitespace-nowrap text-sm text-primary">
                            <button class="font-medium hover:text-primary/80 transition-colors">详情</button>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>

            <!-- 快速调度表单 -->
            <div class="mt-6 p-4 bg-primary/5 rounded-lg">
                <h3 class="text-base font-medium mb-3 text-primary">快速调度</h3>
                <form id="dispatchForm"> <!-- 添加表单ID -->
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div>
                            <label class="block text-sm font-medium text-neutral-700 mb-1">选择任务</label>
                            <select class="w-full px-3 py-2 border border-neutral-300 rounded-md shadow-sm focus:outline-none focus:ring-primary focus:border-primary" required>
                                <option value="">请选择任务...</option>
                                <option value="R-202507">R-202507 - XX村小学</option>
                                <option value="R-202506">R-202506 - XX街道积水点</option>
                            </select>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-neutral-700 mb-1">资源类型</label>
                            <select class="w-full px-3 py-2 border border-neutral-300 rounded-md shadow-sm focus:outline-none focus:ring-primary focus:border-primary" required>
                                <option value="">请选择资源...</option>
                                <option value="rescuer">救援人员</option>
                                <option value="pump">抽水机</option>
                                <option value="ambulance">救护车</option>
                            </select>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-neutral-700 mb-1">调度数量</label>
                            <input type="number" class="w-full px-3 py-2 border border-neutral-300 rounded-md shadow-sm focus:outline-none focus:ring-primary focus:border-primary" min="1" required>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-neutral-700 mb-1">可用数量</label>
                            <p class="px-3 py-2 bg-neutral-100 rounded-md text-neutral-600">28人</p>
                        </div>
                    </div>
                    <div class="mt-4">
                        <label class="block text-sm font-medium text-neutral-700 mb-1">备注说明</label>
                        <textarea class="w-full px-3 py-2 border border-neutral-300 rounded-md shadow-sm focus:outline-none focus:ring-primary focus:border-primary" rows="2" placeholder="可选，填写特殊要求..."></textarea>
                    </div>
                    <div class="mt-4 flex justify-end">
                        <!-- 修改按钮类型为button，并绑定点击事件 -->
                        <button type="button" id="submitDispatch" class="px-4 py-2 bg-primary text-white rounded-md hover:bg-primary/90 transition-colors flex items-center">
                            <i class="fa fa-paper-plane mr-1"></i>提交调度
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</main>

<!-- 成功提示弹窗 -->
<div id="successModal" class="modal">
    <div class="modal-content">
        <div class="modal-icon">
            <i class="fa fa-check-circle"></i>
        </div>
        <h3 class="modal-title">调度成功</h3>
        <p class="modal-desc">您的资源调度请求已提交成功！</p>
        <button id="modalConfirm" class="modal-btn">确定</button>
    </div>
</div>

<script>
    // 更新当前时间
    function updateTime() {
        const now = new Date();
        const timeElement = document.getElementById('current-time');
        timeElement.textContent = now.toLocaleString('zh-CN');
    }
    setInterval(updateTime, 1000);
    updateTime();

    // 初始化地图
    document.addEventListener('DOMContentLoaded', function() {
        const map = L.map('map').setView([39.9042, 116.4074], 13);

        // 添加地图图层
        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
        }).addTo(map);

        // 添加救援点标记
        const rescuePoint1 = L.marker([39.9242, 116.4174]).addTo(map);
        rescuePoint1.bindPopup("<b>XX村小学</b><br>需求: 10名抢险人员、2台抽水机").openPopup();

        const rescuePoint2 = L.marker([39.8942, 116.4374]).addTo(map);
        rescuePoint2.bindPopup("<b>XX街道积水点</b><br>需求: 5名人员、1台抽水机");

        // 添加资源点标记
        const resourcePoint1 = L.marker([39.9142, 116.3974], {icon: L.divIcon({html: '<i class="fa fa-users text-success text-xl"></i>', className: 'custom-div-icon'})}).addTo(map);
        resourcePoint1.bindPopup("<b>救援人员集结点</b><br>可用: 28人");

        const resourcePoint2 = L.marker([39.9342, 116.4274], {icon: L.divIcon({html: '<i class="fa fa-truck text-primary text-xl"></i>', className: 'custom-div-icon'})}).addTo(map);
        resourcePoint2.bindPopup("<b>设备仓库</b><br>可用: 3台抽水机");

        // 添加危险区域
        const dangerArea = L.polygon([
            [39.9100, 116.4000],
            [39.9150, 116.4100],
            [39.9050, 116.4150],
            [39.9000, 116.4050]
        ], {color: 'red', fillOpacity: 0.2}).addTo(map);
        dangerArea.bindPopup("洪水危险区域");
    });

    // 弹窗逻辑
    const modal = document.getElementById('successModal');
    const submitBtn = document.getElementById('submitDispatch');
    const confirmBtn = document.getElementById('modalConfirm');
    const form = document.getElementById('dispatchForm');

    // 点击提交调度按钮
    submitBtn.addEventListener('click', function() {
        // 简单表单验证（确保选择了任务和资源类型）
        const taskSelect = form.querySelector('select');
        const resourceSelect = form.querySelectorAll('select')[1];
        const quantityInput = form.querySelector('input[type="number"]');

        if (!taskSelect.value || !resourceSelect.value || !quantityInput.value) {
            alert('请填写必要的调度信息');
            return;
        }

        // 显示成功弹窗
        modal.classList.add('show');
    });

    // 点击弹窗确定按钮
    confirmBtn.addEventListener('click', function() {
        modal.classList.remove('show');
        // 跳转到emergencyPage.jsp
        window.location.href = 'emergencyPage.jsp';
    });

    // 点击弹窗外部关闭
    modal.addEventListener('click', function(e) {
        if (e.target === modal) {
            modal.classList.remove('show');
        }
    });
</script>
</body>
</html>